<template>
  <!-- 添加兑换码 -->
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :model="form" :inline="true" label-width="150px" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="兑换码">
              <el-input v-model="form.code" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="抵扣金额" prop="money">
              <el-input v-model="form.money" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <!-- <el-form-item>
              <el-input v-model="form.order_sn" clearable />
            </el-form-item>-->
            <el-form-item label="使用范围">
              <el-button type="primary" @click="handleChoose">选择</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="listDiv" v-loading="tableLoading">
          <el-table ref="tableData" :data="tableData" style="width: 100%">
            <el-table-column
              fixed
              type="index"
              label="编号"
              width="50"
              align="center"
              :index="table_index"
            />
            <el-table-column label="卡/券名称" prop="name" align="center" />
            <el-table-column label="零售价" prop="sale_price" align="center" />
            <el-table-column prop="created_at" label="创建时间" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.created_at">{{scope.row.created_at | dates}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="tiket_count" label="购买有效期" align="center">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.validity_start_time || scope.row.validity_end_time"
                >{{scope.row.validity_start_time | dates}}~{{scope.row.validity_end_time | dates}}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button size="small" type="text" @click="handleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="mt_20">
            <el-form ref="form" :model="form" :inline="true" label-width="150px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="有效期" width="236">
                    <el-date-picker
                      v-model="time"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      :default-time="['00:00:00', '23:59:59']"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <!-- 提交按钮 -->
          <div class="allCenter">
            <el-button type="primary" @click="submitList('form')">保存</el-button>
          </div>
        </div>
      </el-form>
    </div>

    <!-- 兑换码使用范围 -->
    <el-dialog title="添加使用范围" :visible.sync="dialogFormVisible" width="60%" center>
      <el-form ref="form1" :model="form1" label-width="150px" :inline="true">
        <el-row>
          <el-col :span="24">
            <el-form-item label="卡、券名称">
              <el-input v-model="form1.goods_name" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="listDiv" v-loading="tableLoading1">
        <el-table
          ref="tableData1"
          :data="tableData1"
          style="width: 100%"
          :row-key="getRowKeys"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
          <el-table-column fixed type="index" label="序号" width="50" align="center" />
          <el-table-column prop="name" label="平台卡券名称" align="center" />
          <el-table-column prop="sale_price" label="零售价" align="center" />
          <el-table-column prop="created_at" label="创建时间" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.created_at">{{scope.row.created_at | dates}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="tiket_count" label="购买有效期" align="center" width="180px">
            <template slot-scope="scope">
              <span
                v-if="scope.row.validity_start_time || scope.row.validity_end_time"
              >{{scope.row.validity_start_time | dates}}~{{scope.row.validity_end_time | dates}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="form1.page"
              :page-sizes="page_sizes"
              :page-size="form1.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <!-- 提交按钮 -->
        <div class="allCenter">
          <el-button type="primary" @click="submitFn()">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCode, getGoods, addCode } from "@/api/quanMange";
export default {
  data() {
    return {
      form: {
        code: "",
        expire_time: "",
        money: "",
        page: 1,
        pagesize: 10
      },
      time: "",
      dialogFormVisible: false,
      form1: {
        pagesize: 10,
        page: 1,
        goods_name: ""
      },
      page_totals: 0,
      page_sizes: [10, 30, 50, 100],
      tableData: [],
      tableData1: [],
      tableLoading: false,
      tableLoading1: true,
      multipleSelection: [],
      good_ids: [],
      rules: {
        money: [{ required: true, message: "请填写抵扣金额", trigger: "blur" }]
      }
    };
  },
  filters: {
    // 时间戳转化
    dates(e) {
      if (e != 0) {
        // yyyy-MM-dd hh:mm:ss
        return new Date(Number(e) * 1000).format("yyyy-MM-dd");
      } else {
        return "";
      }
    }
  },
  mounted() {
    this.handleCode();
  },
  methods: {
    // 序号
    table_index(index) {
      return (this.form.page - 1) * this.form.pagesize + index + 1;
    },
    // 获取兑换码自动生成
    async handleCode() {
      let res = await getCode();
      if (res.data.code == 200) {
        this.form.code = res.data.msg;
      }
    },
    // 删除
    handleDelete(index) {
      this.tableData.splice(index, 1);
    },
    async getList() {
      let res = await getGoods(this.form1);
      if (res.data.code == 200) {
        this.tableLoading1 = false;
        this.tableData1 = res.data.data.data;
        this.page_totals = res.data.data.total;
      } else {
        this.tableLoading1 = false;
        this.$message({
          message: res.data.msg,
          type: "warning"
        });
      }
    },
    //   选择
    handleChoose() {
      this.dialogFormVisible = true;
      this.getList();
    },
    // 查询
    handleSearch() {
      this.form1.page = 1;
      this.getList(this.form1);
    },
    // 列表保存
    submitList(form) {
      if (this.time) {
        this.form.expire_time = this.time[0] + " - " + this.time[1];
      }
      let arr = [];
      this.tableData.forEach(item => {
        arr.push(item.id);
      });
      let good_ids = arr.join(",");
      let data = {
        code: this.form.code,
        expire_time: this.form.expire_time,
        money: this.form.money,
        good_ids: good_ids
      };
      this.$refs[form].validate(valid => {
        if (valid) {
          if (this.form.expire_time) {
            if (this.tableData.length > 0) {
              addCode(data).then(res => {
                if (res.data.code == 200) {
                  this.$message({
                    message: "提交成功",
                    type: "success"
                  });
                  this.$router.push("/Exchangecode");
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "warning"
                  });
                }
              });
            } else {
              this.$message({
                showClose: true,
                message: "请点击使用范围选择",
                type: "error"
              });
            }
          } else {
            this.$message({
              showClose: true,
              message: "请选择有效期",
              type: "error"
            });
          }
        } else {
          this.$message({
            message: "有必填项没填，不能提交咯",
            type: "warning"
          });
        }
      });
    },
    // 弹窗保存
    submitFn() {
      this.tableData = this.multipleSelection;
      this.dialogFormVisible = false;
    },
    getRowKeys(row) {
      return row.id;
    },
    handleSelectionChange(val) {
      if (val) {
        this.multipleSelection = val;
      }
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form1.pagesize = val;
      this.getList(this.form1);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form1.page = val;
      this.getList(this.form1);
    }
  }
};
</script>
<style  scoped>
.app-container {
  padding: 0px !important;
  background: transparent;
}
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.pagesCon {
  margin: 20px 0;
  text-align: right;
}
.allCenter {
  text-align: center;
}
.mt_20 {
  margin-top: 20px;
}
</style>